import GLabel from 'wklabel';
import {MODE} from '../constants';

/**
 * 创建canvas图层
 * @param {String} id 挂载元素的id
 * @param {Object} options 图层基本功能配置
 * @return {GLabel.Map} canvas图层实例
 */
export const createMap = gprops => {
    const {id = 'glabel-map', options = {}} = gprops || {};
    const map = new GLabel.Map(id, {
        center: {x: 250, y: 177}, // 为了让图片居中
        zoom: 800,
        mode: MODE.PAN, // 绘制线段
        refreshDelayWhenZooming: true, // 缩放时是否允许刷新延时，性能更优
        zoomWhenDrawing: true,
        panWhenDrawing: true,
        zoomWheelRatio: 5, // 控制滑轮缩放缩率[0, 10), 值越小，则缩放越快，反之越慢
        withHotKeys: true, // 开启/关闭快捷键
        ...options
    });
    map.register = function(layers) {
        const isArray = Array.isArray(layers);
        if (isArray) {
            layers.forEach(layer => {
                this.addLayer(layer);
            });
        }
        else {
            this.addLayer(layers);
        }
        return this;
    };
    map.getScaleSize = function(size) {
        const scale = this.getScale();
        return size / scale;
    };
    map.exportImage = async function({
        type,
        bounds,
        option
    }) {
        const imagedata = await this.exportLayersToImage(
            {x: 0, y: 0, width: 500, height: 354, ...bounds},
            {type, format: 'image/png', ...option}
        );
        const imageDom = new Image();
        if (type === 'base64') {
            // 导出base64格式
            imageDom.src = imagedata;
        }
        else {
            // 导出blob格式
            const url = URL.createObjectURL(imagedata);
            imageDom.src = url;
            imageDom.onload = () => {URL.revokeObjectURL(url);}
        }

        let aLink = document.createElement('a');
        aLink.style.display = 'none';
        aLink.href = imageDom.src;
        aLink.download = 'export.png';
        // 触发点击-然后移除
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink);
    };
    return map;
};

/**
 * 创建矢量图层 用于承载矢量要素
 * @param {String} id 挂载元素的id
 * @param {Object} props 自定义携带参数
 * @param {Object} style 样式
 * @return {GLabel.Layer.Feature} 矢量图层实例
 */
export const createFeatureLayer = gprops => {
    const {id = 'feature-layer', props = {}, style = {}} = gprops || {};
    const featureLayer = new GLabel.Layer.Feature(
        id, // id
        props, // props
        {zIndex: 10, ...style} // style
    );
    featureLayer.register = function(features) {
        const isArray = Array.isArray(features);
        if (isArray) {
            features.forEach(feature => {
                this.addFeature(feature);
            });
        }
        else {
            this.addFeature(features);
        }
        return this;
    };
    return featureLayer;
};

/**
 * 创建图片图层 用于承载图片
 * @param {String} id 挂载元素的id
 * @param {Object} options 图层配置
 * @param {Object} props 自定义携带参数
 * @param {Object} style 样式
 * @return {GLabel.Layer.Image} 图片图层实例
 */
export const createImageLayer = gprops => {
    const {id = 'image-layer', options = {}, props = {}, style = {}} = gprops || {};
    const imageLayer = new GLabel.Layer.Image(
        id, // id
        {
            src: 'https://i.loli.net/2021/07/13/pViSAGz5hEDItny.jpg',
            width: 500,
            height: 354,
            crossOrigin: true, // 如果跨域图片，需要设置为true
            position: { // 左上角相对中心点偏移量
                x: 0,
                y: 0
            },
            grid: { // 3 * 3
                columns: [{color: '#845EC2'}, {color: '#ff6f91'}],
                rows: [{color: '845EC2'}, {color: '#ff6f91'}]
            },
            ...options
        }, // imageInfo
        props, // props
        {zIndex: 5, ...style} // style
    );
    return imageLayer;
};

/**
 * 创建涂抹图层 用于承载涂抹、擦除、数据回显内容
 * @param {String} id 挂载元素的id
 * @param {Object} props 自定义携带参数
 * @param {Object} style 样式
 * @return {GLabel.Layer.Mask} 涂抹图层实例
 */
export const createMaskLayer = gprops => {
    const {id = 'mask-layer', props = {}, style = {}} = gprops || {};
    const maskLayer = new GLabel.Layer.Mask(
        id, // id
        props, // props
        {zIndex: 11, opacity: .5, ...style} // style
    );
    maskLayer.register = function(actions) {
        const isArray = Array.isArray(actions);
        if (isArray) {
            actions.forEach(action => {
                this.addAction(action);
            });
        }
        else {
            this.addAction(actions);
        }
        return this;
    }
    return maskLayer;
};

/**
 * 创建文本图层 用于承载文本元素
 * @param {String} id 挂载元素的id
 * @param {Object} props 自定义携带参数
 * @param {Object} style 样式
 * @return {GLabel.Layer.Text} 文本图层实例
 */
export const createTextLayer = gprops => {
    const {id = 'text-layer', props = {}, style = {}} = gprops || {};
    const textLayer = new GLabel.Layer.Text(
        id, // id
        props, // props
        {zIndex: 12, opacity: 1, ...style} // style
    );
    textLayer.register = function(textList) {
        const isArray = Array.isArray(textList);
        if (isArray) {
            textList.forEach(text => {
                this.addText(text);
            });
        }
        else {
            this.addText(textList);
        }
        return this;
    };
    return textLayer;
};

